<template>
  <div>
    <div class="mainImg">
      <div class="logo">
        <img src="../assets/netlogo.png" alt="" />
      </div>
      <router-link to="/recycling">
        <div class="toRec">
          <span>我有卡要回收</span>
        </div>
      </router-link>
    </div>
    <div class="news">
      <div class="icon">
        <div class="news_tip"></div>
      </div>
      <div class="news_time">
        <span
          style="    font-size: 16px;
    color: #999;
}"
          >{{news.news_year}}</span
        >
        <strong
          style="
            display: block;
            font-size: 22px;
            color: #333;
            font-weight: 400;
            margin-top: 3px;
          "
          >{{news.news_time}}</strong
        >
      </div>
      <div class="news_cont">
        <h5 style="font-size: 18px; height: 25px; overflow: hidden">
          <span
            style="
              display: block;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              cursor: pointer;
              color: black;
            "
            >{{news.news_title}}</span
          >
        </h5>
        <p style="font-size: 14px; height: 25px;cursor: pointer">
          <span href="" style="color: #333;">{{news.news_content}}</span>
        </p>
      </div>
    </div>
    <div class="function">
      <div style="width: 100%;height: 120px">
        <span>我们能做什么</span>
        <el-divider content-position="center">优质的服务让您的每一笔交易都放心满意</el-divider>
      </div>
      <div style="display: flex;justify-content: space-around">
        <div class="func_con" >
          <i class="el-icon-warning-outline" style="color: #f9c049"></i>
          <div>避免浪费</div>
          <div>
            直接面对用户回收，足不出户即可提交卡号卡密完成回收交易，解决每年上十亿礼品卡闲置的问题。
          </div>
        </div>
        <div class="func_con">
          <i class="el-icon-refresh" style="color: #f9c049"></i>
          <div>
            资金回流
          </div>
          <div>让企业置闲、员工福利、亲友相赠等方式获取的礼品卡快速变现，以达到资金回流最大化。</div>
        </div>
        <div class="func_con">
          <i class="el-icon-magic-stick" style="color: #f9c049"></i>
          <div>交易多样</div>
          <div>提供线上回收、线下交易、API接口等多种交易方式，还可以根据用户自由定制交易方式。</div>
        </div>
      </div>
    </div>
    <div class="function">
      <div style="width: 100%;height: 120px">
        <span>我们能做什么</span>
        <el-divider content-position="center">优质的服务让您的每一笔交易都放心满意</el-divider>
      </div>
      <div style="display: flex;justify-content: space-around">
        <div class="func_con">
          <i class="el-icon-orange" style="color: #1ab2ff"></i>
          <div>丰富</div>
          <div>支持丰富回收多样</div>
        </div>
        <div class="func_con">
          <i class="el-icon-star-off" style="color: #f8598d "></i>
          <div>专心</div>
          <div>专属客服为您服务</div>
        </div>
        <div class="func_con">
          <i class="el-icon-crop" style="color: #24d07a"></i>
          <div>保证</div>
          <div>
            人工处理品牌保证
          </div>
        </div>
        <div class="func_con">
          <i class="el-icon-odometer" style="color: #be68ea"></i>
          <div>极速</div>
          <div>
            处理快捷汇款极速
          </div>
        </div>
        <div class="func_con">
          <i class="el-icon-coin" style="color: #fda101"></i>
          <div>
            价格
          </div>
          <div>
            价格公道让您满意
          </div>
        </div>
      </div>

    </div>


  </div>
</template>
<script>
export default {
  data() {
    return {
      news:{}
    };
  },
  mounted() {
    this.getNews();
  },
  methods: {
    getNews(){
      this.axios.get('/api/getNews').then(res=>{
        console.log(res.data);
        this.news = res.data.pop()
      }).catch(err=>{
        console.log(err)
      })
    }
  },
};
</script>
<style>
  .func_con{
    padding: 50px;
    border: 0.5px solid #dfe3e7;
  }
  .func_con :nth-child(1){
    font-size: 50px;
  }
  .func_con :nth-child(2){
    font-size: 18px;
    margin: 25px;
  }
  .func_con :nth-child(3){
    color: #808080;
    font-size: 14px;
    margin: 30px;
  }
  .function{
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
.mainImg {
  width: 100%;
  height: 400px;
  background: url("https://gitee.com/kang-juntao/asset/raw/giftManage/mainImg.png")
    no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.toRec {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 3px solid white;
  width: 240px;
  height: 60px;
  margin: 60px 0px 0px -120px;
  text-align: center;
  border-radius: 40px;
  color: white;
  font-size: 28px;
  line-height: 60px;
  cursor: pointer;
  transition: 0.3s;
}
.toRec:hover {
  background-color: white;
  color: #3a8ee6;
}
.logo {
  display: inline-block;
  width: 300px;
  z-index: 99;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%) translateY(-50%);
}
.logo img {
  width: 100%;
  height: 100%;
}
.news {
  /*margin-top: -45px;*/
  /*margin-bottom: 50px;*/
  margin: -45px auto 50px;
  width: 75%;
  position: relative;
  z-index: 5;
  height: 90px;
  border: 1px solid #f0f0f0;
  border-color: rgba(255, 255, 255, 0);
  background-color: #fff;
  border-radius: 100px;
  box-shadow: 0 10px 40px -5px rgb(0 0 0 / 11%);
}
.icon {
  position: absolute;
  top: -1px;
  left: -1px;
}
.news_tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 80px;
  height: 80px;
  background: url(../assets/image/notice.png) 0 0 no-repeat;
  border-radius: 100px 0 0 100px;
  cursor: default;
}
.news_time {
  position: absolute;
  top: 22px;
  left: 30px;
  line-height: 20px;
  padding-right: 20px;
  text-align: right;
  border-right: 1px dashed #eee;
}
.news_cont {
  margin: 0 100px 0 138px;
  padding: 20px 0 0 0;
  line-height: 25px;
  color: #ccc;
}
</style>
